<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{marign:0;
        padding:0;
        }
        body{
            text-align:center
        }
        canvas{
            background:#000;
        }
    </style>
</head>
<body>
<canvas id="c1" width="1362" height="700"></canvas>
</body>
<script>
    var  w=c1.width;
    var h=c1.height;
    function rn (min,max){
        var n=Math.ceil(Math.random()*(max-min)+min)
        return n;
    }
    function rg(min,max){
        var r=Math.ceil(Math.random()*255);
        var g=Math.ceil(Math.random()*255);
        var b=Math.ceil(Math.random()*255);
        return `rgb(${r},${g},${b})`;
    }
    var ctx=c1.getContext("2d");
    for(var i=0;i<100;i++){
        //ctx.clearRect(0,0,800,700)
        ctx.beginPath();
        ctx.fillStyle="#fff";
   var p= ctx.arc(rn(0,w),rn(0,h),rn(0,2),0,2*Math.PI);
    ctx.fill();
    }

    c1.onclick=function(e){
        var xDirection=1;
        var self=this;
            var x= e.offsetX
            var y= e.offsetY
        var timer=setInterval(function(){
             ctx.clearRect(x-2,y-2,4,4)
            console.log(x,y);
            x+=1*xDirection;
            y+=1*xDirection;
            ctx.beginPath();
            ctx.arc(x,y,2,0,2*Math.PI);
            ctx.fill()
            if(x<w||y<h) {
                xDirection=1;
            }
        },200)

    }
</script>
</html>